<template>
  <div class="main">
    <!-- :fullscreen="true" -->
    <el-dialog
      title="详细信息"
      :visible.sync="dialogVisible"
      width="80%"
      :destroy-on-close="true"
      custom-class="look-info"
      :before-close="handleClose"
    >
      <el-row>
        <!-- 13 -->
        <el-col :span="isLook ? 24 : 13" style="width:100%">
          <el-card class="box-card">

               <!-- 表格重做 -->
              <div style="margin:0 auto;">
                
                        <!-- <div style="text-align:center;margin-top:10px;">个人简历</div> -->
              <div style=";font-family:MicrosoftYaHei;margin:0 auto;width:100%;height:5vh;line-height:5vh;background:#305fb4;color:#fff;text-align:center;font-weight:bold;font-size:1.2rem">申请人资料</div>
               
                <div style="display:flex;align-items:center;justify-content:space-around;margin:3vh 0;font-weight: bold;font-family:MicrosoftYaHei;">
                  <div>
                    <p style="font-size:.8vw">应聘单位 ：{{ personnelDetail.apply_college }}</p>
                  </div>
                  <div>
                    <p style="font-size:.8vw">应聘岗位 ：{{ personnelDetail.apply_post }}</p>
                  </div>
                </div>

                  <table class="table table-striped table-bordered" align="center" valign="center">
                    
                    <tr>
                      <!-- <td class="column" colspan="7">基本信息</td> -->

                    </tr>
                    <tr>
                      <td class="column">姓名</td>
                      <td  class="value">{{ personnelDetail.name }}</td>
                      <td class="column">英文名</td>
                      <td class="value">{{ personnelDetail.english_name }}</td>
                      <td class="column">年龄</td>
                      <td class="value">{{ personnelDetail.age }}</td>

                      <td class="value" rowspan="5">
                        <div class="avatar-img" style="/* background-color: red; */">
                          <img
                            style="width: 100%; height: 100%; margin-top: 0px"
                            :src="baseUrl + personnelDetail.avatar"
                            alt=""
                          />
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td class="column">性别</td>
                      <td class="value">{{
                    personnelDetail.sex == "0" ? "男" : "女"
                  }}</td>
                      <td class="column">国籍</td>
                      <td class="value">{{ personnelDetail.nationality }}</td>
                      <td class="column">籍贯</td>
                      <td class="value">{{ personnelDetail.native_place }}</td>

                      <!-- <td class="value"></td> -->
                    </tr>
                    <tr>
                      <td class="column">出生年月</td>
                      <td class="value">{{ personnelDetail.birth_time }}</td>
                      <td class="column">民族</td>
                      <td class="value">{{ personnelDetail.nation }}</td>
                      <td class="column">政治面貌</td>
                      <td class="value">{{
                    personnelDetail.political_outlook
                  }}</td>
                      <!-- <td class="value"></td> -->
                    </tr>
                    <tr>
                      <td class="column">最高学位</td>
                      <td class="value" colspan="2">{{ personnelDetail.degree }}</td>
                      <td class="column">身份证(护照)号</td>
                      <td class="value" colspan="2" >{{ personnelDetail.id_card }}</td>
                      <!-- <td class="value"></td> -->

                    </tr>
                    <tr>
                      <td class="column">现从事学科</td>
                      <td class="value" colspan="2">{{ personnelDetail.school }}</td>
                      <td class="column">现研究方向</td>
                      <td class="value"  colspan="2">{{ personnelDetail.research }}</td>
                      <!-- <td class="value" ></td> -->
                    </tr>
                    <tr rowspan="3">
                      <td class="column">手机号码</td>
                      <td class="value" colspan="2">{{ personnelDetail.mobile }}</td>
                      <td class="column">邮箱</td>
                      <td class="value" colspan="3">{{ personnelDetail.email }}</td>
                      <!-- <td class="value" ></td> -->
                    </tr>
                    <tr>
                      <td class="column">配偶姓名</td>
                      <td class="value" colspan="2">{{ personnelDetail.spouse_name }}</td>
                      <td class="column">工作单位</td>
                      <td class="value"  colspan="3">{{ personnelDetail.spouse_unit }}</td>
                      <!-- <td class="value" ></td> -->
                    </tr>
                    <tr>
                      <td class="column">学历学位</td>
                      <td class="value" colspan="2">{{ personnelDetail.spouse_degree }}</td>
                      <td class="column">毕业院校</td>
                      <td class="value"  colspan="3">{{ personnelDetail.spouse_school }}</td>
                      <!-- <td class="value" ></td> -->
                    </tr>
                    <tr>
                      <td class="column">拟加入团队</td>
                      <td class="value" colspan="6">{{ personnelDetail.apply_team }}</td>
                    </tr>
                    <tr>
                      <!-- <td class="column">教育经历(从本科填起)</td> -->
                      <td class="value" colspan="7" style="text-align:left">
                        教育经历(从本科填起) ：
                      </td>

                    </tr>
                    <tr>
                      <td class="value" colspan="1">学位</td>
                      <td class="value" colspan="1">起始时间</td>
                      <td class="value" colspan="1">终止时间</td>
                      <td class="value" colspan="1">国家或地区</td>
                      <td class="value" colspan="2">院校专业</td>
                      <td class="value" colspan="1">导师</td>
                    </tr>
                    <tr v-for="(item, index) in personnelDetail.teach_undergo" :key="index">
                      <td class="value" colspan="1">{{ item.degree }}</td>
                      <td class="value" colspan="1">{{ item.startDate }}</td>
                      <td class="value" colspan="1">{{ item.endDate }}</td>
                      <td class="value" colspan="1">{{ item.location }}</td>
                      <td class="value" colspan="2">{{ item.major }}</td>
                      <td class="value" colspan="1">{{ item.tutor }}</td>
                    </tr>

                    <tr>
                      <!-- <td class="column">教育经历(从本科填起)</td> -->
                      <td class="value" colspan="7" style="text-align:left">
                        工作经历 ：
                      </td>

                    </tr>
                    <tr>
                      <td class="value" colspan="1">职称</td>
                      <td class="value" colspan="1">起始时间</td>
                      <td class="value" colspan="1">终止时间</td>
                      <td class="value" colspan="1">国家或地区</td>
                      <td class="value" colspan="2">工作单位</td>
                      <td class="value" colspan="1">职务</td>
                    </tr>
                    <tr v-for="(item, index) in personnelDetail.work_undergo" :key="index + 'work'">
                      <td class="value" colspan="1">{{ item.post }}</td>
                      <td class="value" colspan="1">{{ item.startDate }}</td>
                      <td class="value" colspan="1">{{ item.endDate }}</td>
                      <td class="value" colspan="1">{{ item.location }}</td>
                      <td class="value" colspan="2">{{ item.unit }}</td>
                      <td class="value" colspan="1">{{ item.partTime }}</td>
                    </tr>



                    <tr>
                      <td class="value" colspan="7" style="text-align:left;">
                        国际学术组织任职或兼职：
                        <br>
                        <br>
                          {{ personnelDetail.introduce }}
                        <br>
                        <br>
                      </td>
                    </tr>


                  </table>
                  

    


              </div>









            





          </el-card>
          <!-- 表格 -->
          <!-- 主要项目表格 -->
          <Card :sub-title="mainProjectData.title" :tip="mainProjectData.tip">
            <div slot="content">
              <TableForm
                ref="projectTableForm"
                :config="mainProjectData"
                style="margin: 20px"
              />
            </div>
          </Card>
          <!-- 主要论文表格 -->
          <Card :sub-title="paperData.title" :tip="paperData.tip">
            <div slot="content">
              <TableForm
                ref="paperTableForm"
                :config="paperData"
                style="margin: 20px"
              />
            </div>
          </Card>
          <!-- 主要著作表格 -->
          <Card :sub-title="mainBookData.title" :tip="mainBookData.tip">
            <div slot="content">
              <TableForm
                ref="bookTableForm"
                :config="mainBookData"
                style="margin: 20px"
              />
            </div>
          </Card>
          <!-- 主要获奖表格 -->
          <Card :sub-title="prizeWinningData.title" :tip="prizeWinningData.tip">
            <div slot="content">
              <TableForm
                ref="winTableForm"
                :config="prizeWinningData"
                style="margin: 20px"
              />
            </div>
          </Card>
          <!-- 发明专利表格 -->
          <Card :sub-title="patentData.title" :tip="patentData.tip">
            <div slot="content">
              <TableForm
                ref="patentTableForm"
                :config="patentData"
                style="margin: 20px"
              />
            </div>
          </Card>
          <!-- 标准规范表格 -->
          <Card :sub-title="standardData.title" :tip="standardData.tip">
            <div slot="content">
              <TableForm
                ref="standardTableForm"
                :config="standardData"
                style="margin: 20px"
              />
            </div>
          </Card>
          <Card v-if="personnelDetail.other" sub-title="其他成果">
            <el-link
              slot="content"
              type="primary"
              @click="handlePreview(personnelDetail.other)"
            ><i class="el-icon-view el-icon--right" />预览</el-link>
          </Card>
          <Card v-if="personnelDetail.planning" sub-title="来校后工作规划">
            <el-link
              slot="content"
              type="primary"
              @click="handlePreview(personnelDetail.planning)"
            ><i class="el-icon-view el-icon--right" />预览</el-link>
          </Card>
          <Card v-if="personnelDetail.prove" sub-title="成果证明">
            <el-link
              slot="content"
              type="primary"
              @click="handlePreview(personnelDetail.prove)"
            ><i class="el-icon-view el-icon--right" />预览</el-link>
          </Card>
          <Card v-if="personnelDetail.recommendation" sub-title="专家推荐信">
            <el-link
              slot="content"
              type="primary"
              @click="handlePreview(personnelDetail.recommendation)"
            ><i class="el-icon-view el-icon--right" />预览</el-link>
          </Card>
          <Card v-if="personnelDetail.spouse_resume" sub-title="配偶简历">
            <el-link
              slot="content"
              type="primary"
              @click="handlePreview(personnelDetail.spouse_resume)"
            ><i class="el-icon-view el-icon--right" />预览</el-link>
          </Card>
        </el-col>
        <!-- 11 -->
      </el-row>
      <el-dialog
        width="70%"
        title="查看评审"
        :visible.sync="innerVisible"
        append-to-body
        :destroy-on-close="true"
      >
        <!-- 基本 -->
        <Review :all-data="allData" />
      </el-dialog>

      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogVisible = false"
        >确 定</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>
<script>
import config from './config'
import Review from './components/Review'
import { getPersonnelDetail } from '@/api/personnel'
import Card from '@/components/Card/index.vue'

export default {
  components: {
    Review,
    Card
  },
  data () {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      dialogVisible: false,
      // 主要项目表格
      mainProjectData: config.mainProjectData,
      // 主要著作表格
      mainBookData: config.mainBookData,
      // 主要获奖表格
      prizeWinningData: config.prizeWinningData,
      // 发明专利表格
      patentData: config.patentData,
      standardData: config.standardData,
      paperData: config.paperData,
      // 内层查看评审弹窗
      innerVisible: false,
      personnelDetail: {},
      allData: {},
      // role: sessionStorage.getItem('role'),
      role: localStorage.getItem('role'),
      isLook: false,
      // 人才id
      personnelId: '',
      // 专家学术评价情况数据
      census: {},
      // 专家信息列表
      expertList: [],
      // 国家标准费用
      treatment: {}
    }
  },
  created () {},
  methods: {
    open (id, flag = true) {
      // 人才id
      this.personnelId = id
      if (
        flag ||
        this.role === '管理员' ||
        this.role === '超级管理员' ||
        this.role === '学院'
      ) {
        this.isLook = true
      } else {
        this.isLook = false
      }
      this.dialogVisible = true
      this.getPersonnelDetail(id)
    },
    refresh () {
      this.dialogVisible = false
      this.$emit('refresh')
    },
    handleClose () {
      this.dialogVisible = false
    },
    openInnerVisible () {
      this.innerVisible = true
    },
    // 获取人才详细资料
    async getPersonnelDetail (id) {
      const res = await getPersonnelDetail({ id })
      this.allData = res.data
      // 专家学术评价情况
      this.census = res.data.census
      // 当前角色为评委时保存参与当前人才评价的专家信息
      if (this.role === '评委') {
        this.expertList = res.data.expert_name
        this.treatment = res.data.treatment
      }
      this.personnelDetail = res.data.personnel

      this.$refs.projectTableForm.setData(this.personnelDetail.project)
      this.$refs.bookTableForm.setData(this.personnelDetail.work)
      this.$refs.winTableForm.setData(this.personnelDetail.award)
      this.$refs.patentTableForm.setData(this.personnelDetail.patent)
      this.$refs.paperTableForm.setData(this.personnelDetail.paper)
      this.$refs.standardTableForm.setData(this.personnelDetail.standard)

      // this.personnelDetail.teach_undergo =
      //   this.personnelDetail.teach_undergo.replaceAll('&quot;', '"')
      // this.personnelDetail.work_undergo =
      //   this.personnelDetail.work_undergo.replaceAll('&quot;', '"')
      // this.personnelDetail.teach_undergo = JSON.parse(
      //   this.personnelDetail.teach_undergo.replaceAll('&quot;', '"')
      // )
      // this.personnelDetail.work_undergo = JSON.parse(
      //   this.personnelDetail.work_undergo.replaceAll('&quot;', '"')
      // )
    },
    handlePreview (path) {
      const fileUrl = process.env.VUE_APP_BASE_API + path
      if (fileUrl.indexOf('.pdf') !== -1) return window.open(fileUrl, '_target')
      const url = encodeURIComponent(fileUrl)
      const officeUrl =
        'http://view.officeapps.live.com/op/view.aspx?src=' + url
      window.open(officeUrl, '_target')
    }
  }
}
</script>
<style lang="scss" scoped>

.table{
    border-collapse: collapse;
    border-spacing: 0;
    background-color: transparent;
    display: table;
    width: 100%;
    max-width: 100%;
    width: 100vw;
    margin:0 auto;
  }
  .table td{
    text-align:center;
    vertical-align:middle;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #333333;
    font-weight: bold;
    padding: 8px 12px;

  }
  .table-bordered {
    border: 1px solid #ddd;
  }
//   *{
//     margin: 0px;
//     padding: 0px;
//   }
  .column{
    width:10vw;
    height:4vh;
    border:1px solid #333;
    background: #f1f1f1;
  }
  .value{
    width:15vw;
    height:4vh;
    border:1px solid #333;
  }



::v-deep.el-dialog {
  background-color: #f8f8f8;
}

.avatar-img {
  width: 128px;
  height: 164px;
  margin: 0 auto;
}

.el-row {
  display: flex;
  flex-wrap: nowrap;
}

.box-card {
  .left-title {
    height: 35px;
    text-align: center;
    font-size: 20px;
    font-family: MicrosoftYaHei;
    font-weight: bold;
    color: #333333;
  }
  .el-row:nth-child(2) {
    .el-col {
      .el-row {
        height: 34px;
        line-height: 34px;
        border-bottom: 1px solid #333;
        .el-col {
          font-size: 14px;
          font-family: MicrosoftYaHei;
          font-weight: bold;
          color: #333333;
          height: 100%;
          text-align: center;
          border-right: 1px solid #333;
          border-bottom: none;

          &:nth-last-child(2n + 1) {
            font-size: 14px;
            font-family: MicrosoftYaHei;
            font-weight: bold;
            // color: #ff0913;
          }
        }
      }
    }
  }
  .other {
    .el-row {
      height: 34px;
      line-height: 34px;
      border: 1px solid #333;
      border-top: none;
      font-size: 14px;
      font-family: MicrosoftYaHei;
      font-weight: bold;
      color: #333333;
      .el-col {
        border-right: 1px solid #333;
        height: 100%;
        text-align: center;
        border-right: 1px solid #333;
        border-bottom: none;

        &:nth-last-child(2n + 1) {
          // padding-left: 22px;
          box-sizing: content-box;
          font-size: 14px;
          font-family: MicrosoftYaHei;
          font-weight: bold;
          // color: #ff0913;
        }
        &:nth-last-child(1) {
          border-right: none;
        }
      }
    }

    .table-header {
      .el-col {
        color: #333 !important;
      }
    }
    .table-body {

        height: 90px;

      .el-col {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 90px;
        // color: #ff0913;
      }
    }
  }
}

// .box-card .other .el-row .el-col {
//   margin-left: -22.5px;
//   .content {
//     text-align: center;
//     margin-right: -22.5px;
//   }
// }
// .pd-l {
//   padding-left: 55.5px !important;
//   margin-left: -35.5px !important;
//   box-sizing: content-box !important;
// }
// .mg-l {
//   margin-left: -78px !important;
// }
// .pd-r {
//   padding-right: 30px !important;
//   box-sizing: content-box !important;
//   div {
//     margin-right: -30px;
//   }
// }
</style>
